
<template>
  <div>
    <el-row style="padding-bottom: 10px">
      <div v-permission="['admin']">
        <el-col align="right">
          <a @click="addRelationAsset"> <i class="el-icon-link"></i>&nbsp;&nbsp;关联机器 </a>
        </el-col>
      </div>
    </el-row>
    <el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <page-table height="200" :columns="assetColumns" :data="assetsList" :loading="assetLoading" :max-height="assetMaxHeight" border size="small" stripe></page-table>
        </el-col>
      </el-row>
    </el-row>
    <related-asset
      v-if="showRelatedAssetModal"
      :show-related-asset-modal="showRelatedAssetModal"
      :service-info="serviceInfo"
      :action="action"
      :change-asset-ids="changeAssetIds"
      @on-asset-change="setRelateAsset"
    ></related-asset>
  </div>
</template>

<script>
import { getCmdbService } from '@/api/cmdb/service'
import { pingAliveCheckAsset } from '@/api/cmdb/asset'
import { snakeCaseObject } from '@/libs/object'
import PageTable from '@/components/PageTable/PageTable'
import { esAssetColumns, dfsAssetColumns, redisAssetColumns } from '@/views/cmdb/detail/serviceAsset/config'
import { assetTypeChoice, zoneChoice, envChoice } from '@/views/cmdb/config'
import checkPermission from '@/utils/permission'
import RelatedAsset from '@/views/cmdb/detail/serviceAsset/components/RelatedAsset'
import { errorNotify } from '@/libs/util'

export default {
  name: 'ServiceAsset',
  components: { PageTable, RelatedAsset },
  props: {
    serviceInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      assetsList: [],
      assetLoading: false,
      assetMaxHeight: 700,
      assetTypeChoice: [],
      assetInfo: {},
      assetColumns: [],
      assetDatas: [],
      searchParams: {
        search: '',
        assetType: '',
        zone: '',
        env: ''
      },
      zoneChoice: [],
      envChoice: [],
      action: {
        title: '创建',
        type: 'create'
      },
      showRelatedAssetModal: false,
      changeAssetIds: []
    }
  },
  computed: {
    serviceId() {
      return this.$route.params.serviceId
    }
  },
  created() {},
  mounted() {
    this.assetTypeChoice = assetTypeChoice(this)
    this.envChoice = envChoice(this)
    this.zoneChoice = zoneChoice(this)
    this.getCmdbService()
  },
  methods: {
    checkPermission,
    async getCmdbService() {
      this.assetLoading = true
      const { data } = await getCmdbService(snakeCaseObject(this.serviceId))
      this.assetsList = data.assets
      if (data.serviceType === 'ES') {
        this.assetColumns = esAssetColumns(this)
      } else if (data.serviceType === 'DFS') {
        this.assetColumns = dfsAssetColumns(this)
      } else {
        this.assetColumns = redisAssetColumns(this)
      }
      this.assetLoading = false
    },
    setConfirmAssetModal(val) {
      this.showConfirmAssetModal = val['status']
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'delete')) {
        this.getAssetPageList()
      }
    },
    setDeleteModal(val) {
      console.log(val)
      this.showAssetDeleteModal = val['status']
    },
    addRelationAsset() {
      this.showRelatedAssetModal = true
      this.changeAssetIds = []
      this.action = { source: 'detail', title: '添加', type: 'add', env: this.serviceInfo.env, zone: this.serviceInfo.zone }
    },
    setRelateAsset(val) {
      this.showRelatedAssetModal = val['status']
      if (val['type'] === 'add' || val['type'] === 'remove') {
        this.getCmdbService()
      }
    },
    async pingAliveCheckAsset(assetId) {
      try {
        this.assetLoading = true
        const { data } = await pingAliveCheckAsset(assetId)
        if (data.status === 'ok') {
          this.$Notice.success({ title: 'Ping测试', desc: data.msg })
        } else {
          this.$Notice.error({ title: 'Ping测试', desc: data.msg })
        }
      } catch (e) {
        errorNotify(e)
      } finally {
        this.assetLoading = false
      }
    }
  }
}
</script>

<style>
.form-font {
  color: #515a6e;
  line-height: 32px;
  font-size: 13px;
  padding-right: 10px;
}
</style>
